<template>
	<view class="evaluate">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'订单评价',color:'#fff'}" />
		<!-- #endif -->
		<view class="technician">
			<view class="js_introduce">
				<view class="js_photo">
					<image :src="technician.cover" mode=""></image>
				</view>
				<view class="js_message">
					<view class="top_msg">
						<text class="technician_name">{{technician.name}}</text>
						<text class="work_year">从业时间: {{technician.work_age}}年</text>
						<view class="score">
							<image src="/static/images/collect.png" mode=""></image>
							<text>{{technician.score}}</text>
						</view>
					</view>
					<view class="main">
						{{technician.detail}}
					</view>
					<view class="bottom_msg">
						<view class="">
							<image src="/static/images/technician/security.png" mode=""></image>
							<text>实名认证</text>
						</view>
						<view class="">
							<image src="/static/images/technician/refund.png" mode=""></image>
							<text>爽约包退</text>
						</view>
						<view class="">
							<image src="/static/images/technician/certificate.png" mode=""></image>
							<text>资质证书</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate_box">
			<view class="grade">
				<view class="grade_item" v-for="(item,index) in score" :key="index">
					<view class="grade_item_box">
						<text>{{item.name}}：</text>
						<uni-rate allow-half :max="5" :margin="7" color="#666" active-color="#fd5c5b" :is-fill="false" :touchable="true" v-model="item.value" />
					</view>
				</view>
			</view>
			<view class="evaluate_tag">
				<view class="evaluate_tag_item"
					v-for="(item,index) in tag" 
					:key="index" 
					@click="changeTag(index)"
					:class="[{'active_tag':item.chex}]"
				>
					<view>{{item.title}}</view>
				</view>
			</view>
			<view class="evaluate_text">
				<textarea v-model="evaluateValue" placeholder-style="color:#8B8B8B" placeholder="留言评价" maxlength="200" />
			</view>
		</view>
		<view class="submit" @click="submit">
			提交评价
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				technician:{}, //技师信息
				orderId:"",    //订单ID
				grade:{
					major:1,
					attitude:1,
					punctual:1,
				},
				score:[],    //评分内容
				tag:[],		 //评价小节
				evaluateValue:"",  //文字评价
			};
		},
		onShow() {
			var data = JSON.parse(uni.getStorageSync('evaluateData'))
			console.log(data,'-----------------123')
			this.technician = data.technician
			this.orderId = data.orderId
			//获取评价配置
			this.$http({
				url:'/api/product/order/comment_config',
				method:'',
				success:result=>{
					console.log(result)
					if(result.code  ==  200){
						var data = result.data
						data.score.forEach((item,index)=>{
							item.value = 5
						})
						this.score = data.score
						console.log(this.score,'-----------------------score')
						console.log(this.tag,'-----------------------tag')
						let tag = []
						data.tag.forEach((item,index)=>{
							tag.push({
								title:item,
								chex:false
							})
						})
						this.tag = tag
					}
				}
			})
		},
		methods:{
			//选中tag小节
			changeTag(i){
				this.tag[i].chex = !this.tag[i].chex
			},
			//评价提交
			submit(){
				if(this.evaluateValue == ''){
					uni.showToast({
						title:'请输入评价内容',
						icon:"none"
					})
					return false;
				}
				//评分
				let data = {}
				this.score.forEach((item,index)=>{
					data[item.key] = item.value
				})
				//评价小节
				let tag = []
				let arr = this.tag.filter(el=>{ return el.chex })
				arr.forEach((item,index)=>{
					tag.push(item.title)
				})
				data.tags = tag
				//文字评价
				data.comment_text = this.evaluateValue
				console.log(data,'-------------------data')
				this.$http({
					url:`/api/product/order/comment/${this.orderId}`,
					method:'post',
					data,
					success:result=>{
						console.log(result,'---------------------------评价')
						if(result.code == 200){
							uni.removeStorageSync('evaluateData')
							uni.showToast({
								title:'评价成功'
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/orders/index'
								})
							},1500)
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.evaluate{
		width: 100%;
		height: 100%;
		.technician{
			margin: 20px 0;
			.js_introduce{
				height: 120px;
				margin: 13px 12px; 
				border-radius: 7px;
				background-color: #fff;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
				display: flex;
				.js_photo{
					width: 82px;
					height: 82px;
					margin: 16px 13px;
					border-radius: 50%;
					overflow: hidden;
					>image{
						width: 100%;
						height: 100%;
					}
				}
				.js_message{
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					.top_msg{
						// margin-top: 35px;
						display: flex;
						// justify-content: space-around;
						.technician_name{
							font-size: 18px;
							font-weight: bold;
							color: #2e2e2e;
							margin-right: 9px;
						}
						.work_year{
							font-size: 14px;
							font-weight: 500;
							color: #2BE17F;
							margin-right: 15px;
						}
						.score{
							display: flex;
							align-items: center;
							>image{
								width: 12.5px;
								height: 12.5px;
								margin-right: 5px;
							}
						}
					}
					.main{
						font-size: 20upx;
					}
					.bottom_msg{
						display: flex;
						align-items: center;
						justify-content: space-around;
						// margin-top:30px;
						view{
							display: flex;
							align-items: center;
							margin-right: 5px;
						}
						image{
							width: 15px;
							height: 15px;
							margin-right: 2px;
						}
					}
				}
			}
			
		}
		.evaluate_box{
			margin: 13px 12px; 
			background-color: #fff;
			padding-bottom: 10px;
			.grade{
				height: 170px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				.grade_item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.grade_item_box{
						width: 90%;
						padding: 5px 0;
						background-color: #f5f5f5;
						display: flex;
						align-items: center;
						border-radius: 14px;
						>text{
							margin-left: 20px;
						}
					}
				}
			}
			.evaluate_tag{
				padding: 0 5%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.evaluate_tag_item{
					width: 22%;
					margin: 7px 10px;
					padding: 2px 6px;
					text-align: center;
					color: #616161;
					background-color: #eee;
					border-radius: 4px;
				}
				.active_tag{
					background-color: #2BE17F;
					color: #fff;
				}
			}
			.evaluate_text{
				>textarea{
					width: 90%;
					margin: 10px auto;
					background-color:#f5f5f5;
					text-indent: 5px;
					border-radius: 14px;
					padding: 10px;
					box-sizing: border-box;
					color: #666;
				}
			}
		}
		.submit{
			margin: 35px 12px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			font-size: 22px;
			font-weight: bold;
			color: #fff;
			background-color: #24D576;
			border-radius: 18px;
		}
	}
</style>
